<template>
  <div class="type-cloud">
    <div class="title">
      <h2><i class="el-icon-cloudy"></i> 标签云</h2>
    </div>
    <div class="type-list">
      <a
        v-for="item in typeList"
        :key="item"
        href="javascript:"
        @click="loadArticleByType"
        >{{ item }}</a
      >
    </div>
  </div>
</template>

<script>
import { api } from "@/api";
export default {
  data() {
    return {
      articleInfo: {
        list: [],
        total: 0,
      },
      typeList: [],
      loading: false,
      type: "",
    };
  },
  methods: {
    pageChange(page) {
      this.loadArticleInfoByType(null, this.type, page);
    },
    async loadArticleByType(e) {
      const type = e.target.innerText;
      this.$emit("load-desc-type", type);
    },
    async loadArticleInfoByType(aid = null, type = null, page = 1) {
      this.type = type;
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleListByType(aid, type, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    async loadArticleInfo(aid = null, keyWord = null, page = 1) {
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleList(aid, keyWord, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    async loadDescTypeList() {
      this.typeList = (await this.$axios(api.article.getDescTypeList())).data;
    },
  },
  mounted() {
    this.loadDescTypeList();
  },
};
</script>

<style lang="less" scoped>
.type-cloud {
  @media screen and (max-width: 800px) {
    opacity: 0;
  }
  margin-top: 50px;
  background: rgba(255, 255, 255, 0.3);
  min-height: 200px;
  max-height: 500px;
  overflow: hidden;
  .title h1 {
    margin-left: 20px;
  }
  .type-list {
    padding: 16px;
  }
  .type-list a {
    display: inline-block;
    background: #fff;
    line-height: 34px;
    text-align: center;
    position: relative;
    margin: 4px 5px;
    padding: 0 14px;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    &:hover {
      background: #409eff;
    }
  }
}
</style>
